<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<script src="lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>

     <div id="app">
         <com-1 @func='getInfo'></com-1>
          
          <ul class="list-group">
              <li class="list-group-item" v-for="(item, index) in list" :key="item.id">
                  <span class="badge">评论人:{{ item.user }}</span>
               {{ item.content}}
              </li>
             
          </ul>
          
     </div>
     <template id="tmp1">
         <div>
            <div class="form-group">
                <label for="">评论人</label>
                <input type="text" class="form-group form-control" v-model="user">
            </div>
            <div class="form-group">
                <label for="">评论内容</label>
                <textarea class="form-control" v-model="content"></textarea>
            </div>
            <input type="button" value="发表评论" class="btn btn-primary" @click='postComment'>
         </div>
     </template>

     <script>
         var comp1 = {
             template:"#tmp1",
             data(){
                 return{
                     user:'',
                     content:''
                 }
             },
             methods:{
                postComment(data){
                    this.$emit('func',{user:this.user,content:this.content})
                }
             }
         }
        var vm = new Vue({
             el : '#app',
             data : {
             list:[
                 {id: Date.now(),user: '李白', content: '天生我材必游泳'},
                 {id: Date.now(),user: '江小白', content: '劝君更尽一杯酒'},
                 {id: Date.now(),user: '小马', content: '风吹草地现牛羊'},
                 {id: Date.now(),user: '李白', content: '天生我材必游泳'},
             ],
             
            },
            components:{
                 'com-1':comp1
             },
             methods:{
                 getInfo(data){
                     this.list.push({id: Date.now(),user: data.user,content: data.content})
                 }
             }
        }) 

     </script>

</body>

</html>
